<template>
  <div class="clock-container">
    <flip-item :total="2" :current="timeArr[0]" />
    <flip-item :total="9" :current="timeArr[1]" />
    <div class="colon"></div>
    <flip-item :total="5" :current="timeArr[2]" />
    <flip-item :total="9" :current="timeArr[3]" />
    <div class="colon"></div>
    <flip-item :total="5" :current="timeArr[4]" />
    <flip-item :total="9" :current="timeArr[5]" />
  </div>
</template>

<script>
import FlipItem from "./FlipItem.vue";

export default {
  components: {
    FlipItem,
  },
  data() {
    return {
      timeArr: this.getTimeArr(),
    };
  },
  mounted() {
    this.startTimer();
  },
  beforeUnmount() {
    this.stopTimer();
  },
  methods: {
    startTimer() {
      this.timer = setTimeout(() => {
        this.stopTimer();
        this.timeArr = this.getTimeArr();
        this.startTimer();
      }, 1000);
    },
    stopTimer() {
      clearTimeout(this.timer);
    },

    getTimeArr(now = new Date()) {
      // const Y = now.getFullYear()
      // const M = now.getMonth() + 1
      // const D = now.getDate()
      const h = now.getHours();
      const m = now.getMinutes();
      const s = now.getSeconds();
      return [
        // ...toArr(Y),
        // ...toArr(M),
        // ...toArr(D),
        ...this.toArr(h),
        ...this.toArr(m),
        ...this.toArr(s),
      ];
    },

    // 更换数组类型
    toArr(n) {
      return n >= 10 ? ("" + n).split("").map((item) => Number(item)) : [0, n];
    },
  },
};
</script>

<style lang='scss' scoped>
.clock-container {
  display: flex;
  align-items: center;
}
.colon {
  height: 20px;
  padding: 0 4px;
  display: flex;
  justify-content: space-around;
  flex-direction: column;
  &::after,
  &::before {
    content: "";
    display: block;
    width: 5px;
    height: 5px;
    background: rgba(255, 255, 255, 1);
    border-radius: 50%;
  }
}
</style>
